<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基础demo" name="first">
        <div>
          <async-component v-bind="previewData" />
          <multi-select :options="fields" :value.sync="value" />
          <el-table
            :data="tableData"
            style="width: 500px"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="商品名称">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="所属店铺">
                    <span>{{ props.row.shop }}</span>
                  </el-form-item>
                  <el-form-item label="商品 ID">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                  <el-form-item label="店铺 ID">
                    <span>{{ props.row.shopId }}</span>
                  </el-form-item>
                  <el-form-item label="商品分类">
                    <span>{{ props.row.category }}</span>
                  </el-form-item>
                  <el-form-item label="店铺地址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="商品描述">
                    <span>{{ props.row.desc }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              label="商品 ID"
              prop="id"
            />
            <el-table-column
              label="商品名称"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="desc"
            />
            <el-table-column
              label="商品 ID"
              prop="id"
            />
            <el-table-column
              label="商品名称"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="desc"
            />
            <el-table-column
              label="商品 ID"
              prop="id"
            />
            <el-table-column
              label="商品名称"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="desc"
            />
            <el-table-column
              label="商品 ID"
              prop="id"
            />
            <el-table-column
              label="商品名称"
              prop="name"
            />
            <el-table-column
              label="描述"
              prop="desc"
            />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="自定义业务组件" name="second">
        <complex-form
          id=""
          form-id="968244843669098496"
          inner-reuest
        />
        <el-button type="primary" @click="getFormData">保存</el-button>
        <p>{{ formData }}</p>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import AsyncComponent from '@admin/packages/async-component/src/main'
import MultiSelect from '@admin/components/multiSelect'
export default {
  name: 'Demo',
  components: {
    AsyncComponent,
    MultiSelect
  },
  data() {
    return {
      fields: [{
        id: '1',
        name: '男'
      }, {
        id: '2',
        name: '女'
      }],
      value: '1',
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }],
      previewData: {
        js: `function generate() {
          return {
            name: 'customCode',
            data(){
              return {
                name: 'liming',
                phone: '188xxxxxxx',
                address: '北京市'
              }
            },
            mounted: function(){
              console.log(this)
            },
            methods: {
              
            },
          };
        }`,
        template: `<template>
          <div class='wrapper'>
            <el-descriptions>
                <el-descriptions-item label="用户名">{{name}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{phone}}</el-descriptions-item>
                <el-descriptions-item label="居住地"><i class="el-icon-house" />{{address}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </template>`,
        css: `.wrapper {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
          }
        `
      },
      activeName: 'first',
      formData: '',
      eleConf: { '__config__': { 'key': 'team', 'label': '所属团队', 'labelWidth': '', 'tag': 'ele-distype-1002', 'required': true, 'span': 12 }, '__extend__': { 'options': [] }, '__server__': { 'id': '813850975109386240', 'tableId': '813849781209141248', 'code': 'team', 'name': '所属团队', 'dataType': 'VARCHAR', 'length': 32, 'isNull': 0, 'dataFormat': null, 'eleType': '10', 'eleDisType': '1002', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': '813645441689194496', 'groupName': null, 'inputDesc': '例：11作战部111作战科', 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': 0, 'renderFlag': 1, 'accessRight': 4, '__config__': { 'Id': '813850975109386240', 'OrderId': 1, 'ColSpan': 12, 'FieldAccess': 4, 'IsNull': 0, 'IsHide': 0, 'IsParent': false }}, '__lookup__': { 'funcCode': '833442478697746432', 'formId': '845720167336906752' }, '__data__': { 'state': 1, 'id': '968240014792069120', 'process_node': '1' }, '__rule__': { 'fieldControl': [], 'fieldRely': [], 'fieldBackfill': [] }, '__fields__': [{ 'id': '813850388779241472', 'tableId': '813849781209141248', 'code': 'project_name', 'name': '项目名称', 'dataType': 'VARCHAR', 'length': 32, 'isNull': 0, 'dataFormat': null, 'eleType': '7', 'eleDisType': '70', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': null, 'groupName': null, 'inputDesc': null, 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': 0, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '813850533835051008', 'tableId': '813849781209141248', 'code': 'data_node', 'name': '数据节点', 'dataType': 'VARCHAR', 'length': 100, 'isNull': 0, 'dataFormat': null, 'eleType': '6', 'eleDisType': '60', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': '813658246530207744', 'groupName': null, 'inputDesc': null, 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': null, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '813850975109386240', 'tableId': '813849781209141248', 'code': 'team', 'name': '所属团队', 'dataType': 'VARCHAR', 'length': 32, 'isNull': 0, 'dataFormat': null, 'eleType': '10', 'eleDisType': '1002', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': '813645441689194496', 'groupName': null, 'inputDesc': '例：11作战部111作战科', 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': 0, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '813849897013874688', 'tableId': '813849781209141248', 'code': 'examination_no', 'name': '检查单编码', 'dataType': 'VARCHAR', 'length': 32, 'isNull': 1, 'dataFormat': null, 'eleType': '1', 'eleDisType': '10', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': null, 'groupName': null, 'inputDesc': null, 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': 0, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '813852825166548992', 'tableId': '813849781209141248', 'code': 'process_node', 'name': '流程节点', 'dataType': 'VARCHAR', 'length': 100, 'isNull': 1, 'dataFormat': null, 'eleType': '6', 'eleDisType': '60', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': '813851330912194560', 'groupName': null, 'inputDesc': null, 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': null, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '813853488000798720', 'tableId': '813849781209141248', 'code': 'data_reviewer', 'name': '数据审核负责人', 'dataType': 'VARCHAR', 'length': 32, 'isNull': 1, 'dataFormat': null, 'eleType': '10', 'eleDisType': '1001', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': null, 'groupName': null, 'inputDesc': null, 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': 0, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '813852985716117504', 'tableId': '813849781209141248', 'code': 'status', 'name': '状态', 'dataType': 'VARCHAR', 'length': 100, 'isNull': 1, 'dataFormat': null, 'eleType': '6', 'eleDisType': '60', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': '813662425768267776', 'groupName': null, 'inputDesc': null, 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': null, 'validateMsg': null, 'displayWidth': null, 'renderFlag': 1, 'accessRight': 4 }, { 'id': '850436092506148864', 'tableId': '813849781209141248', 'code': 'last_confirmer', 'name': '结果确认人', 'dataType': 'VARCHAR', 'length': 100, 'isNull': 1, 'dataFormat': '', 'eleType': '10', 'eleDisType': '1001', 'isMultivalued': 0, 'valuesCount': 1, 'codeTypeId': null, 'groupName': '', 'inputDesc': '', 'orderId': 1, 'rowSpan': 1, 'colSpan': 12, 'uniqueValue': 0, 'validateExpression': '', 'validateMsg': '', 'displayWidth': null, 'renderFlag': 1, 'accessRight': 4 }], '__layout__': { 'tabIndex': 0, 'groupIndex': 0, 'tabName': 'tab_0' }}
    }
  },
  computed: {
  },
  beforeCreate: function() {
    window.$CD = {
      'treeId': '',
      'treeInfo': {},
      'code': '0906',
      'pcode': '',
      'pageId': '833442040829186048',
      'callback': {},
      'fieldEvent': {},
      'fieldRule': {},
      'fieldAttr': {
        'end_time': {
          'picker-options': {}
        }
      },
      'pageName': '菜单名称'
    }
  },
  methods: {
    getFormData() {
      this.formData = this.$form.getFormData()
    }
  }
}
</script>

<style lang="scss" scoped>
// 系统应用隐藏预览方法
</style>
